<template>
  <div class="shopping-contain">
    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner" id="shopping-contain-top" v-for="(item,i) in shoppingInfo" :key="item.id">
          
          <mt-switch
          v-model="$store.getters.getGoodsSelect[item.id]" @change="changCarSelect(item.id)">
          </mt-switch>
          <img :src="item.thumb_path" alt="">

          <div  class="info">
            <h1 class="title">{{item.title}}</h1>
            <p>
              <span class="price">￥{{item.sell_price}}</span>
              <inputNumber :initcount="$store.getters.getGoodsCount[item.id]" :id="item.id"></inputNumber>
              <a href="javascript:;" @click.prevent="delCarShop(item.id,i)">删除</a>
            </p>
          </div>
        </div>
      </div>
    </div>

    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner" id="shopping-contain-buttom">
          <div class="left">
            <p>总计(不含运费)</p>
            <p>
              已经勾选的商品<span>{{$store.getters.getGoodsCountAndTotalPrice.count}}</span>件,总价：<span>￥{{$store.getters.getGoodsCountAndTotalPrice.price}}</span> 
            </p>
          </div>
          <mt-button type="danger">去结算</mt-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>


import inputNumber from "./subComponents/inputNumber.vue"
export default {
  data(){
    return{
        shoppingInfo:[]
    }
  },
  components:{
    inputNumber
  },
  created(){
    this.getshoppingInfo();
  },
  methods:{
    // 获取购物车页面的数据
    getshoppingInfo(){
       // 获取购物车内的id
       let ids =[];
       this.$store.state.car.forEach((item)=>{
         ids.push(item.id)
       })
      this.$http.get("http://www.liulongbin.top:3005/api/goods/getshopcarlist/"+ids.join(',')).then(result=>{
        if(result.body.status===0){
        this.shoppingInfo = result.body.message
        }else{
          Toast("失败")
        }
      })
    },
     // 修改localstorge中的选择状态
    changCarSelect(id){
      this.$store.commit("changSelect",id)
    },
    // 删除商品列表中的商品
    delCarShop(id,i){
      // 删除了购物车列表中的数据
      this.shoppingInfo.splice(i,1);
      // 删除localstroge的数据
      this.$store.commit("delCarShop",id)
    }
  },
}
</script>

<style lang="scss" scoped>
.shopping-contain{
  #shopping-contain-top{
    display: flex;
    align-items: center;
    
    img{
      width: 60px;
      height: 60px;
    }
    .info{
      .title{
      font-size: 13px;
      }
      p{
        color:red;
        margin: 0px;
        padding: 0px;
        margin-top: 10px;
      }
    }  
  }

  #shopping-contain-buttom{
    display: flex;
    justify-content: space-between;
    align-items: center;

    p{
      span{
        color: red;
        font-size: 18px;
      }
    }
  }
}
</style>
